<template>
  <view class="container">
    <u-navbar
      :is-fixed="false"
      :border-bottom="false"
      :is-back="false"
      :background="{ background: '#fff' }"
      title="火车票"
      title-color="#000"
    >
    </u-navbar>
		<u-toast ref="uToast" />
		<u-action-sheet
			:list="stationList"
			v-model="showSelect"
			@click="commit"
		></u-action-sheet>
		<view>
			<view class="header">
				<image class="img" src="/static/images/home.jpg"></image>
			</view>
			<view class="search">
				<view @click="chooseStation('start')">{{start}}</view>
				<image @click="doEx" class="img" src="/static/images/exchange.svg"></image>
				<view @click="chooseStation('end')">{{end}}</view>
			</view>
			<view class="date">
				<view @click="showCan" class="row">
					<view>{{date}}</view>
					<view>></view>
				</view>
				<u-calendar :min-date="today" :max-date="maxDate" @change="chooseDate" v-model="show" :mode="mode"></u-calendar>
			</view>
			<button class="submit" @click="search">查询车票</button>
		</view>
  </view>
</template>

<script>
import moment from 'moment'
import { getStation } from '../../api/system/api'
export default {
  data() {
    return {
			start: '',
			end: '',
			show: false,
			mode: 'date',
			date: '',
			showSelect: false,
			stationList: [],
			today: moment().format('YYYY-MM-DD'),
			maxDate: moment().add(14, 'days').format('YYYY-MM-DD'),
		};
  },

  methods: {
		showCan() {
			this.show = true
		},
		chooseDate(e) {
			this.date = e.result
		},
		search() {
			if (!this.start || !this.end) {
				this.$refs.uToast.show({
					title: '站点不能为空',
					type: 'error',
				})
				return
			}
			this.$u.route('/pages/interest/ticket', {
				start: this.start,
				end: this.end,
				date: this.date
			})
		},
		chooseStation(type) {
			this.type = type
			this.showSelect = true
		},
		commit(index) {
			this[this.type] = this.stationList[index].text;
		},
		doEx() {
			let e = this.end;
			this.end = this.start;
			this.start = e;
		}
	},
	created() {
		getStation({
			page: 1,
			pageSize: 1000
		}).then(res => {
			console.log(res)
			this.stationList = res.data.data.map(v => {
				return {
					text: v.stationName
				}
			})
			this.start = this.stationList[0].text
			this.end = this.stationList[1].text
		})
		this.date = moment().format('YYYY-MM-DD')
	}
};
</script>

<style lang="scss" scoped>
.container {
  background-color: #f7f7f7;
  min-height: 100vh;
  overflow: hidden;
}
.header {
	width: 100%;
	height: 500rpx;
	.img {
		width: 100%;
		height: 100%;
	}
}
.search,
.date {
	display: flex;
	padding: 90rpx 60rpx 0 60rpx;
	font-size: 40rpx;
	font-weight: bold;
	justify-content: space-between;

	.img {
		width: 60rpx;
		height: 60rpx;
	}
}

.submit {
	margin: 90rpx auto;
	border: none;
	width: calc(100% - 60rpx);
	height: 86rpx;
	line-height: 86rpx;
	box-sizing: border-box;
	border-radius: 15rpx;
	background-color: #5f88ff;
	color: #ffffff;
}
.row {
	display: flex;
	width: 100%;
	justify-content: space-between;
}
</style>
